<%@ page contentType="text/html;charset=UTF-8" %>


<div class="bjui-pageHeader">

</div>
<body>

<div class="bjui-pageContent tableContent" id="div1">
    <table>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="final_yield" style="width:100%;height:50%;" ></div>
        <div id="line1" style="width:50%;height:50%;float: left" ></div>
        <div id="line2" style="width:50%;height:50%;float: right" ></div>
        <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '关键工序碎片率实时监控',
                    textStyle:{fontSize:25}
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}:\n{c}%'
                },
                legend: {
                    data:['1线','2线','目标'],
                    textStyle:{fontSize:25}
                },
                xAxis: {
                    data:['良率'],
                    axisLabel:{textStyle:{fontSize:25}}
                },
                yAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            formatter: '{value} %',
                            textStyle:{fontSize:25}

                        }
                    }
                ],
                series : [

                    {
                        name: '1线',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}%'//百分比显示
                                }
                            }
                        },
                            data:${final_yield.ONE}
                    },
                    {
                        name: '2线',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}%'//百分比显示
                                }
                            }
                        },
                        data:${final_yield.TWO}
                    },
                    {
                        name: '目标',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inside',//数据在中间显示
                                    formatter:'{c}%'//百分比显示
                                }
                            }
                        },
                        data:${final_yield.TARGET}
                    }
                    ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("macarons", document.getElementById('final_yield'), option);
        </script>

    </table>


<div>
    <table>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data=[];
            <g:each in="${defect_one_yield}" status="i" var="tableInstance">
            data.push('${tableInstance.DEFECT_DESC}');
            </g:each>


            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '1线不良柏拉图',
                    textStyle:{fontSize:25}
                },
                tooltip: {},

                xAxis: {
                    data:data,
                    axisLabel:{textStyle:{fontSize:25}}
                },
                yAxis : [
                    {
                        type : 'value',
                        name:'',
                        axisLabel : {
                            formatter: '{value}',
                            textStyle:{fontSize:25}
                        },
                        show:true
                    },
                    {
                        type : 'value',
                        name:'',

                        axisLabel : {
                            formatter: '{value}%',
                            textStyle:{fontSize:25}
                        },
                        show:true
                    }
                ],
                series : [

                    {
                        name: '',
                        type: 'bar',
                        data:${defect_one_yield.DEFECT_QTY}
                    },
                    {
                        name: '',
                        type: 'line',
                        data:${defect_one_yield.DEFECT_YIELD},
                        yAxisIndex: 1
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("macarons", document.getElementById('line1'), option);
        </script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data=[];
            <g:each in="${defect_two_yield}" status="i" var="tableInstance">
            data.push('${tableInstance.DEFECT_DESC}');
            </g:each>


            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '2线不良柏拉图',
                    textStyle:{fontSize:25}
                },

                tooltip: {},
                xAxis: {
                    data:data,
                    axisLabel:{textStyle:{fontSize:25}}
                },
                yAxis : [
                    {
                        type : 'value',
                        name:'',
                        axisLabel : {
                            formatter: '{value}',
                            textStyle:{fontSize:25}
                        },
                        show:true
                    },
                    {
                        type : 'value',
                        name:'',

                        axisLabel : {
                            formatter: '{value}%',
                            textStyle:{fontSize:25}
                        },
                        show:true
                    }
                ],
                series : [

                    {
                        name: '',
                        type: 'bar',
                        data:${defect_two_yield.DEFECT_QTY}
                    },
                    {
                        name: '',
                        type: 'line',
                        data:${defect_two_yield.DEFECT_YIELD},
                        yAxisIndex: 1
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("macarons", document.getElementById('line2'), option);
        </script>
        <script>
            $(function(){
                window.setTimeout(function(){
                    $("#turn").click();
                },600000);
            })
        </script>
    </table>
</div>
</div>

</body>
<div class="bjui-pageFooter">
    <form data-toggle="ajaxsearch" action="${request.getContextPath()}/board/ctm_control" method="post">
        <button style="VISIBILITY: hidden" id="turn" type="submit" class="btn-default" data-icon="search" >跳转按钮</button>
    </form>
</div>